<template>
  <detail title="" v-if="tableData.length">
    <p class="title">变动记录</p>
    <div class="ChangeRecord" style="width: 100%">
      <c-table :data="tableData" style="width: 100%">
        <c-table-column prop="applyDeptName" label="变动申请部门" />
        <c-table-column prop="createTime" label="申请时间" />
        <c-table-column prop="changeReason" label="申请意见" />
        <c-table-column prop="examineName" label="审核结果" />
        <c-table-column prop="examineResultDes" label="审核意见" />
        <c-table-column prop="examineDeptName" label="审核部门" />
        <c-table-column prop="auditFlag" label="操作">
          <template slot-scope="scope">
            <c-link
              style="margin-right: 10px"
              v-if="scope.row.auditFlag && isOperation"
              type="primary"
              :underline="false"
              @click="auditClick(scope.row)"
              >审核</c-link
            >
            <c-link
              v-if="scope.row.fileList && scope.row.fileList.length"
              type="primary"
              :underline="false"
              @click="lookClick(scope.row)"
              >查看附件</c-link
            >
          </template>
        </c-table-column>
      </c-table>

      <c-dialog title="查看附件" :visible.sync="visible" width="500">
        <FileView :fileList="fileList" v-if="fileList.length" />
        <!-- <div v-for="(i, index) in fileList" :key="index" class="file">
          <c-link type="primary" style="margin-right: 200px">{{
            i.fileName
          }}</c-link>
          <c-link
            type="primary"
            :underline="false"
            :href="i.fileUrl"
            target="_blank"
            >下载</c-link
          >
        </div> -->
        <span slot="footer">
          <c-button type="primary" @click="visible = false">确认</c-button>
        </span>
      </c-dialog>

      <c-dialog title="变动申请审核" :visible.sync="visible_audit" width="500">
        <c-form
          :model="form_audit"
          ref="form"
          :rules="rules"
          labc-width="80px"
          :inline="false"
          size="normal"
        >
          <c-form-item label="审核结果" prop="examineCode">
            <c-radio-group v-model="form_audit.examineCode">
              <c-radio :label="1"> 通过 </c-radio>
              <c-radio :label="2"> 不通过 </c-radio>
            </c-radio-group>
          </c-form-item>
          <c-form-item label="处理意见" prop="examineResultDes">
            <c-input
              v-model="form_audit.examineResultDes"
              placeholder=""
              type="textarea"
              :autosize="{ minRows: 2, maxRows: 4 }"
              clearable
            ></c-input>
          </c-form-item>
        </c-form>
        <span slot="footer">
          <c-button type="primary" @click="submit_audit">确认</c-button>
          <c-button @click="visible_audit = false">取消</c-button>
        </span>
      </c-dialog>
    </div>
  </detail>
</template>
<script>
import { itemChangeRecordList, changeAudit } from '@/api/check.js'
import FileView from '@/component/FileUpload/FileView'
// import FileView from '@/component/ConsultResult/src/FileView/index.js'
import { mapGetters } from 'vuex'

export default {
  name: 'ChangeRecord',
  components: {
    FileView,
  },
  data() {
    return {
      tableData: [],
      visible: false,
      visible_audit: false,
      fileList: [],
      form_audit: {},
      rules: {
        examineCode: [
          { required: true, message: '请输入审核结果', trigger: 'blur' },
        ],
        examineResultDes: [
          { required: true, message: '请输入处理意见', trigger: 'blur' },
        ],
      },
      currentRow: {},
    }
  },
  created() {
    this.itemChangeRecordList()
  },
  mounted() {},
  computed: {
    ...mapGetters(['user']),
  },
  props: {
    isOperation: {
      type: Boolean,
      default: () => {
        return true
      },
    },
  },
  methods: {
    // 变动记录list
    itemChangeRecordList() {
      const { deptCode, userId } = this.user
      let params = {
        itemCode: this.$route.query.itemCode,
        deptCode,
        userId,
      }
      itemChangeRecordList(params).then(({ success, data }) => {
        if (success && data) {
          this.tableData = data.records
          this.$emit('scrollDom')
        }
      })
    },
    // 查看附件
    lookClick(row) {
      this.visible = true
      this.fileList = row.fileList
      this.fileList.map((i) => {
        i.url = i.fileUrl
        i.name = i.fileName
      })
    },
    // 变动记录
    auditClick(row) {
      this.form_audit = {}
      this.visible_audit = true
      this.currentRow = row
    },
    // 变动记录提交
    submit_audit() {
      let row = this.currentRow
      this.$refs['form'].validate((valid) => {
        if (valid) {
          let params = {
            id: row.id,
            ...this.form_audit,
          }
          changeAudit(params).then((res) => {
            if (res.success) {
              this.visible_audit = false
              this.$message.success(res.message)
              this.itemChangeRecordList()
            }
          })
        }
      })
    },
  },
}
</script>
<style lang="scss" scoped>
.title {
  font-family: PingFangSC-Medium;
  font-size: 16px;
  color: rgba(0, 0, 0, 0.85);
  font-weight: bold;
  margin: 22px 0 10px 0;
}
</style>

